<template>
  <div style="width: 100%;">
    <el-tabs>
      <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.title">
        <el-scrollbar max-height="300px">
          <div class="container" @click="clickItem(msg, index)" v-for="(msg, index) in item.content">
            <div class="avatar" v-if="msg.avatar">
              <el-avatar icon="el-icon-user-solid" size="small" shape="circle" :src="msg.avatar" fit="fill"></el-avatar>
            </div>
            <div class="content">
              <div class="title" v-if="msg.title">
                <div>{{ msg.title }}</div>
                <div>
                  <el-tag v-if="msg.tag" :type="msg.tagType" size="small" effect="dark">
                    {{ msg.tag }}
                  </el-tag>
                </div>
              </div>
              <div class="time" v-if="msg.desc">{{ msg.desc }}</div>
              <div class="time" v-if="msg.time">{{ msg.time }}</div>
            </div>
          </div>
        </el-scrollbar>
        <div class="actions">
          <div class="a-item" @click="clickAction(item, index)" :class="{ border: index !== actions.length - 1 }"
            v-for="(item, index) in actions" :key="item.text">
            <div v-if="item.icon">
              <component :is="`el-icon-${item.icon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`" />
            </div>
            <div v-if="item.text">
              {{ item.text }}
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { ListItem, ListOptions, ActionOptions } from './listTypes'

let props = defineProps({
  // 显示弹窗内容
  list: {
    type: Array as PropType<ListOptions[]>,
    required: true,
    default: [
      {
        title: '关注',
        content: [
          {
            avatar: 'https://marketplace.canva.cn/FON5Q/MACOClFON5Q/2/tl/canva-MACOClFON5Q.png',
            title: 'test1',
            time: '2022-04-18 21:32:00',
            tagType: 'info',
            tag: '未开始',
          },
          {
            // avatar: 'https://marketplace.canva.cn/FON5Q/MACOClFON5Q/2/tl/canva-MACOClFON5Q.png',
            title: 'test1',
            time: '2022-04-18 21:32:00',
          },
          {
            avatar: 'https://marketplace.canva.cn/FON5Q/MACOClFON5Q/2/tl/canva-MACOClFON5Q.png',
            title: 'test1',
            time: '2022-04-18 21:32:00',
            tagType: 'info',
            tag: '未开始',
          },
          {
            // avatar: 'https://marketplace.canva.cn/FON5Q/MACOClFON5Q/2/tl/canva-MACOClFON5Q.png',
            title: 'test1',
            time: '2022-04-18 21:32:00',
          },
        ],
      },
      {
        title: '订阅',
        content: [
          {
            avatar: '',
            title: 'test1',
            time: '2022-04-18 21:32:00',
          },
        ],
      },
      {
        title: '事件',
        content: [
          {
            avatar: '',
            title: 'test1',
            time: '2022-04-18 21:32:00',
          },
        ],
      },
    ],
  },
  // 操作内容
  actions: {
    type: Array as PropType<ActionOptions[]>,
    default: () => [
      {
        icon: 'delete',
        text: '清除清除',
      },
      {
        icon: 'edit',
        text: '编辑编辑',
      },
      // {
      //   icon: 'edit',
      //   text: '全部已读',
      // },
    ],
  },
})

let emits = defineEmits(['itemClick', 'actionClick'])
let clickItem = (item: ListItem, index: number) => {
  emits('itemClick', { item, index })
}

let clickAction = (item: ActionOptions, index: number) => {
  emits('actionClick', { item, index })
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex: 3;
  align-items: center;
  cursor: pointer;
  padding: 2px 2px;

  &:hover {
    // 没有 & 则各元素单独显示
    // 鼠标放上去的效果
    background-color: #e6f6f6;
  }

  .avatar {
    flex: 1; // 图标占1份
    margin-right: 10px;
  }

  .content {
    font-size: 14px;
    flex: 3; // 内容占3份

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between; // 水平内容:两边排列
    }

    .time {
      font-size: 10px;
      color: #999;
      margin-top: 4px;
    }
  }
}

.actions {
  display: flex;
  height: 30px;
  align-items: center;
  border-top: 1px solid #eee;
  cursor: pointer; // 手形鼠标

  .a-item {
    flex: 1; // 多个按钮分开显示
    display: flex;
    height: 100%; // 影响 border 的高度
    justify-items: center;
    justify-content: center; // 水平居中
    align-items: center;
    font-size: 12px;

    svg {
      width: 0.9em;
      height: 0.9em;
    }
  }

  .border {
    border-right: 1px solid #eee;
  }
}
</style>
